/**
 * iPaper.css
 * by Lin Ye
 */
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td, menu{margin:0;padding:0;}
html{}
body,button,input,select,textarea{ font:12px/1.5 "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;}
iframe{border:0;margin:0;padding:0;}
img, fieldset{border:0;}
cite,em,strong,th{font-style:inherit;font-weight:inherit;}
h1, h2, h3, h4, h5, h6{font-size:100%;font-weight:normal;}
input,button,textarea,select{*font-size:100%;}
ol, ul, menu{list-style:none;}
input, button{border:0;}
table{border-collapse:collapse;border-spacing:0;}
th{text-align:left;}
blockquote{quotes:none;}
blockquote:before,blockquote:after,{content:'';content:none;}
a{text-decoration:none;}
td,th,div{ display:block; word-break:break-all;word-wrap:break-word}
pre,xmp{white-space:pre-wrap}
form{display:inline;}
input{vertical-align:middle;}
em,cite,i{font-style:normal;}
s{text-decoration:none;}
*{outline:none}
:focus{outline:0;}
.clear{clear:both;}
/*css3*/
.br10{-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.br5{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.br-b10{ -moz-border-radius-bottomleft: 7px;-moz-border-radius-bottomright: 7px;-webkit-border-bottom-left-radius: 7px;-webkit-border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;border-bottom-right-radius: 7px; } 
.br-t10{ -moz-border-radius-topleft: 7px;-moz-border-radius-topright: 7px;-webkit-border-top-left-radius: 7px;-webkit-border-top-right-radius: 7px;border-top-left-radius: 7px;border-top-right-radius: 7px; } 

@font-face{
    font-family: 'iconic';
    src: url(../font/iconic_stroke-webfont.eot);
}
@font-face {
    font-family: 'iconic';
    src: url(../font/iconic_stroke-webfont.ttf);
}

/*main*/
body { font-family: 'PT Sans', sans-serif; background:#FFF; 
overflow-y: hidden; overflow-x: hidden;}

.title{ font-size: 80px; }
.title-sub{ font-size: 20px; }
.title, .title-sub { color:#575c74; display:block; width:500px; position:absolute; font-family: 'Segoe Script', georgia, serif; text-align:center; margin-left:-150px; left:45%;}

.wboard{ cursor: crosshair; z-index:10; }
#whiteboard0{ z-index:100; }


.clearBtn, .saveBtn, .preBtn, .nextBtn, .eraseBtn, .brushBtn, .addpicBtn, .shadowBtn, .searchBtn{ display:block; width:60px; height:50px; line-height:48px;  cursor:pointer;  -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; opacity:0.5; }
.clearBtn, .saveBtn, .preBtn, .nextBtn, .eraseBtn, .brushBtn, .addpicBtn, .shadowBtn, .searchBtn
{
    background:url(../images/myicon.png) no-repeat 0 0;
}

.clearBtn{ z-index:100; position:absolute; top:10px; right:10px; }
.clearBtn:hover{ -webkit-transform: rotate(480deg) scale(0.9); -moz-transform:rotate(480deg) scale(0.9); -ms-transform:rotate(480deg) scale(0.9); -o-transform:rotate(480deg) scale(0.9); transform:rotate(480deg) scale(0.9); opacity:1; }
.saveBtn:hover, .preBtn:hover, .nextBtn:hover, .eraseBtn:hover, .brushBtn:hover, .addpicBtn:hover, .shadowBtn:hover, .searchBtn:hover{ -webkit-transform: rotate(360deg) scale(0.9); -moz-transform:rotate(360deg) scale(0.9); -ms-transform:rotate(360deg) scale(0.9); -o-transform:rotate(360deg) scale(0.9); transform:rotate(360deg) scale(0.9); opacity:1; }

.brushBtn{ background-position: 0 -200px; }
.eraseBtn{ background-position: 0 -250px; }
.nextBtn{ background-position: 0 -150px; }
.preBtn{ background-position: 0 -100px; }
.saveBtn{ background-position: 0 -50px;}
.addpicBtn{ background-position: 0 -300px; }
.shadowBtn{ background-position: 0 -350px;}
.searchBtn{ background-position: 0 -400px;}

.saveBtn.dis, .preBtn.dis, .nextBtn.dis, .eraseBtn.dis, .brushBtn.dis, .addpicBtn.dis, .shadowBtn.dis, .searchBtn.dis{
opacity:0.2; cursor:default;
}
.saveBtn.dis:hover, .preBtn.dis:hover, .nextBtn.dis:hover, .eraseBtn.dis:hover, .brushBtn.dis:hover, .addpicBtn.dis:hover, .shadowBtn.dis:hover, .searchBtn.dis:hover{ -webkit-transform: rotate(0) scale(1); -moz-transform:rotate(0) scale(1); -ms-transform:rotate(0) scale(1); -o-transform:rotate(0) scale(1); transform:rotate(0) scale(1); }

.saveBtn.sel, .preBtn.sel, .nextBtn.sel, .eraseBtn.sel, .brushBtn.sel, .addpicBtn.sel, .shadowBtn.sel, .searchBtn.sel{ opacity:1; }

ul.buttons{ width:750px; margin-left:-375px; left:50%; z-index:200; position:absolute; top:0; border:1px solid #ccc; border-top:0; padding:0 5px; }
ul li{ float:left; margin:5px 10px; line-height:48px; font-size:20px;color:#ccc; }



.dragDiv{ display:block; width:419px; height:27px; }
.dragImg{ cursor: move; z-index:1000;}





#slide{
	z-index:0;
}
#shadowImg{ 
	position: absolute;
	width: 480px;
	height: 480px;
	max-width: 480px;
	max-height: 480px;
	
	left: 50%;
	top: 50%;
	margin-left: -240px;
	margin-top: -240px;
}

#loading{
	position: absolute;
	width: 480px;
	height: 480px;
	
	left: 50%;
	top: 50%;
	margin-left: -240px;
	margin-top: -260px;
	display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: start;
}


#slide .slides {
	position: absolute;
	width: 480px;
	height: 480px;
	
	left: 50%;
	top: 50%;
	margin-left: -240px;
	margin-top: -240px;
	-webkit-transition: -webkit-perspective .4s ease;
	   -moz-transition: -moz-perspective .4s ease;
	    -ms-transition: -ms-perspective .4s ease;
	     -o-transition: -o-perspective .4s ease;
	        transition: perspective .4s ease;
	
	-webkit-perspective: 480px;
	   -moz-perspective: 480px;
	    -ms-perspective: 480px;
	        perspective: 480px;

 	-webkit-perspective-origin: 50% 25%;
 	   -moz-perspective-origin: 50% 25%;
 	    -ms-perspective-origin: 50% 25%;
 	        perspective-origin: 50% 25%;
}

#slide .slides > canvas{
	display: none;
	position: absolute;
	width:478px;
	min-height: 478px;
	
    z-index: 10;
	
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	
	-webkit-transition: all .8s cubic-bezier(0.260, 0.860, 0.440, 0.985);
	   -moz-transition: all .8s cubic-bezier(0.260, 0.860, 0.440, 0.985);
	    -ms-transition: all .8s cubic-bezier(0.260, 0.860, 0.440, 0.985);
	     -o-transition: all .8s cubic-bezier(0.260, 0.860, 0.440, 0.985);
	        transition: all .8s cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
#slide .slides > .slide{
    
    border-radius: 5px;
    /*background-color: #eee;*/
    width:478px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    border: 1px solid rgba(0, 0, 0, .2);

    color: #111;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);

    font-size: 30px;
    line-height: 36px;

    letter-spacing: -1px;
    word-break:break-all;
}
#slide .slides > canvas.past {
	display: block;
	opacity: 0;
	
	-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
	   -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
	    -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
	        transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
#slide .slides > canvas.present {
	display: block;
	z-index: 11;
	opacity: 1;
}
#slide .slides > canvas.future {
	display: block;
	opacity: 0;
	
	-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
	   -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
	    -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
	        transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}

/*上下按钮*/
#btn_page_next, #btn_page_prev{ color: #DDD; cursor:pointer; display:block;height:120px;width:80px;position:absolute; z-index:3; }
#btn_page_next:hover, #btn_page_prev:hover{ color: #999; }
#btn_page_prev{left:0;}		 
#btn_page_next{right:0;}
#btn_page_prev span,#btn_page_next span{ display:block; font-size:120px;line-height:160px;width:50px;margin:0 20px 0 20px;}
#btn_page_next span{ text-align:right; }

#dropzone {
	position: absolute;
	width: 480px;
	height: 480px;
	left: 50%;
	top: 50%;
	margin-left: -240px;
	margin-top: -240px;
	z-index: 0;
	text-align: center;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;
	color:#EEE;
	font-size:30px;
	font-family: 'Myriad Pro';
}
#dropzone.rounded {
	-webkit-box-shadow: inset 0px 0px 15px #DDD;
	-moz-box-shadow: inset 0px 0px 15px #DDD;
	-o-box-shadow: inset 0px 0px 15px #DDD;
	box-shadow: inset 0px 0px 15px #DDD;
	border: 2px dashed #DDD;
}
#dropImg {
	position: absolute;
	width: 480px;
	height: 480px;
	left: 50%;
	top: 50%;
	margin-left: -240px;
	margin-top: -240px;
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
}



.vbox {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;

  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-align: stretch;

  display: box;
  box-orient: vertical;
  box-align: stretch;
}


@-webkit-keyframes BGimgAnim {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.0;
	}
}
#BGimg{
	max-width:478px;
	max-height:478px;
	-webkit-animation-fill-mode: both;
	-webkit-animation-name: BGimgAnim;
	-webkit-animation-duration: 75s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-direction: alternate;
}

@-webkit-keyframes startLogo {
	0% {
		opacity: 0.0;
	}
	5.66% {
		opacity: 1.0;
	}
	24.53% {
		opacity: 1.0;
	}
	43.39% {
		opacity: 1;
	}
	64.15% {
		opacity: 0.2;
	}
	81.48% {
		opacity: 1.0;
	}
	100% {
		opacity: 0;
	}
}

.logo{
	-webkit-animation-fill-mode: both;
	-webkit-animation-name: startLogo;
	-webkit-animation-duration: 5.3s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: alternate;
}


.imgPreview{
	/*width:1070px;
	height:100px;*/
	padding:5px; 
	z-index:200; 
	position:absolute;  
	bottom: -150px;
	left: 50%;
	margin-left: -535px;
	
}
.imgPreview:hover{
	width:1170px;
	height:200px;
	margin-left: -585px;
}
.imgPreview-inner{
	width:100%;
	height:100%;
	display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: end;
}
.imgPreview .imgsBox{
	position:relative;
	float:left;
	border:1px solid #ccc; 
	margin:0 5px 0 0;
	height:100px;
	width:100px;
	display: block;
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	-webkit-transition-property: height,width;
    -webkit-transition-duration: 0.5s,0.5s;
}

.imgPreview .imgsBox p{
	font-size:24px;
	line-height:24px;
	font-family:'Arial';
	font-weight:bold;
	position:absolute;
	top:2px;
	right:5px;
	color:Black;
}
.imgPreview .imgsBox img{
	cursor:pointer;
	height:100px;
	width:100px;
	-webkit-transition-property: height,width;
    -webkit-transition-duration: 0.5s,0.5s;
}
.imgPreview .imgsBox img:hover,.imgPreview .imgsBox:hover{

	height:200px;
	width:200px;
}



@-webkit-keyframes showImgBox {
	from {
		bottom: -150px;
	}
	to {
		bottom: 0;
	}
}
.showBox{
	-webkit-animation-fill-mode: both;
	-webkit-animation-name: showImgBox;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-direction: alternate;
}

@-webkit-keyframes hideImgBox {
	from {
		bottom: 0;
	}
	to {
		bottom: -150px;
	}
}
.hideBox{
	-webkit-animation-fill-mode: both;
	-webkit-animation-name: hideImgBox;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-direction: alternate;
}